import React, { useState } from 'react';

import type { MenuProps } from 'antd';
import { Breadcrumb, Layout, Menu, theme } from 'antd';
import { NavLink, Outlet } from 'react-router-dom';
import { homeroute } from '../../route';
import Indexa from '../../compengts/Index';

const { Header, Content, Footer, Sider } = Layout;

type MenuItem = Required<MenuProps>['items'][number];

function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[],
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
  } as MenuItem;
}

const data = (arr) => {
  const list = []
  arr && arr.forEach(item => {
    if (item.children) {
      list.push(getItem(<NavLink to={item.path}>{item.title}</NavLink>, item.title, item.icon, data(item.children)))
    } else {
      list.push(getItem(<NavLink to={item.path}>{item.title}</NavLink>, item.title, item.icon))
    }
  });
  return list
}
const items = data(homeroute)
const App: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  const imgs = localStorage.getItem('imgs')
  const user = localStorage.getItem('username')
  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
        <div className="demo-logo-vertical" />
        <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} />
      </Sider>
      <Layout style={{ background: 'var(data--item)' }}>
        <Header style={{ padding: 0, background: colorBgContainer }}>
          <div className='box'>
            <Indexa></Indexa>
            {user}
            <img src={imgs} alt="" className='imgs' />
          </div>
        </Header>
        <Content style={{ margin: '0 16px' }}>
          <Breadcrumb style={{ margin: '16px 0' }} items={[{ title: 'User' }, { title: 'Bill' }]} />
          <div
            style={{
              padding: 24,
              minHeight: 360,
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}
          >
            <Outlet></Outlet>
          </div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>
          Ant Design ©{new Date().getFullYear()} Created by Ant UED
        </Footer>
      </Layout>
    </Layout>
  );
};

export default App;